<template>
  <sub-page>
    <q-toolbar-title slot="title">修改信息</q-toolbar-title>
    <q-btn flat dense icon="check" slot="more" @click="confirm" />
    <q-page slot="content">
      <p>
        <q-input filled v-model="nickname" label="昵称" />
      </p>
      <div>
        性别:
        <q-btn-toggle
          v-model="model"
          class="my-custom-toggle"
          no-caps
          rounded
          unelevated
          toggle-color="primary"
          color="white"
          text-color="primary"
          :options="genderOptions"
        />
      </div>
      <div>
        头像:
        <image-preview
          :maxCount="max"
          @onAddImage="onAddImage"
          @onDeleteImage="onDeleteImage"
          ref="imgPreview"
        />
      </div>
      <div v-if="errorMsg === ''">
        {{ errorMsg }}
      </div>
      <q-dialog v-model="alert">
        <q-card>
          <q-card-section>
            <div class="text-h6">提示</div>
          </q-card-section>

          <q-card-section class="q-pt-none"> 修改成功! </q-card-section>

          <q-card-actions align="right">
            <q-btn
              flat
              label="确认"
              color="primary"
              v-close-popup
              @click="goback"
            />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </q-page>
  </sub-page>
</template>

<script>
import SubPage from "@/components/SubPage";
import ImagePreview from "@/components/ImagePreview";

export default {
  components: {
    SubPage: SubPage,
    ImagePreview: ImagePreview,
  },
  data() {
    return {
      errorMsg: "",
      acc: {},
      max: 1,
      imgUrl: "",
      nickname: "",
      model: 1,
      alert: false,
      genderOptions: [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ],
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    showCamera() {
      this.$router.push({ name: "Capture", params: { plan: "123" } });
    },
    async onAddImage(e) {
      console.log(e);
      let res = await this.$account.uploadImg(e);
      console.log(res.data);
      this.imgUrl = res.data;
    },
    async onDeleteImage(e) {
      console.log(e);
      let res = await this.$account.delImg(this.imgUrl);
      console.log(res.data);
      this.imgUrl = "";
    },
    async confirm() {
      try {
        if (/^.{2,8}$/.test(this.nickname)) {
          console.log(this.nickname, this.model, this.imgUrl);
          let res = await this.$account.supplementalInfo(
            this.nickname,
            this.model,
            this.imgUrl
          );
          console.log(res.data);
          if (res.data.status === false) {
            this.errorMsg = res.data.message;
            return;
          }
          let resAcc = await this.$account.getAccount(
            this.$store.state.cur_user.account_id
          );
          if (resAcc.data.status === false) {
            this.errorMsg = resAcc.data.message;
            return;
          }
          // 更新用户信息
          this.$store.commit("updateAccount", resAcc.data);
          this.$utils.setJsonObj("current_user", resAcc.data);
          this.alert = true;
        }
      } catch (err) {
        this.errorMsg = err;
      }
    },
  },
  activated: function () {
    // this.acc = this.$store.state.cur_user;
    this.model = this.$store.state.cur_user.gender;
    this.nickname = this.$store.state.cur_user.nickname;
  },
};
</script>

<style scoped>
.file {
  border: 1px dashed #3fcc8e;
  display: inline-block;
  overflow: hidden;
  line-height: 88px;
  text-align: center;
  height: 100px;
  width: 75px;
  background: #eeeeee;
}
.img {
  border: 1px dashed #3fcc8e;
  display: block;
  overflow: hidden;
  line-height: 88px;
  text-align: center;
  height: 100px;
  width: 75px;
  background: #eeeeee;
}
.file:hover {
  background: white;
}

.opt {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}

.van-hairline--bottom {
  height: 60px;
  line-height: 60px;
}

.inputPhoto {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
.my-custom-toggle {
  border: 1px solid #027be3;
}
</style>